<template>
  <div>
    <h2>类型断言/类型守卫</h2>
    <h3>1 类型断言</h3>
    <p>
      有时候你比 TS
      更知道会是什么类型，所以可以强制将类型进行转换，通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
      通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。
    </p>

    <p>类型断言有两种形式：</p>
    <h4>1.1 尖括号语法</h4>
    <pre class="codebgc">
      {{ 尖括号语法 }}
    </pre>
    <h4>1.2 as语法 （推荐）</h4>
    <pre class="codebgc">
      {{ as语法 }}
    </pre>
    <h3>2 类型守卫</h3>
    <p>
      类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。目前主要有四种的方式来实现类型保护：
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({
  name: 'App',
  components: {},
  setup(props) {
    let someValue: any = ref('this is a string')
    let strLength: number = (<string>someValue.value).length
    //推荐
    let strLength2: number = (someValue.value as string).length

    let 尖括号语法 = `
    let someValue: any = ref('this is a string')
    let strLength: number = (<string>someValue.value).length
    `
    let as语法 = `
    let someValue: any = ref('this is a string')
    let strLength2: number = (someValue.value as string).length
    `
    return {
      尖括号语法,
      as语法,
    }
  },
})
</script>

<style lang="scss" scoped>
@import '@/global.scss';
.codebgc {
  @extend .codebgc;
}
</style>